<template>
	<view class="content">
		 <Tabs
			:TabList="TabList"
			:currentTab="current"
			@tabs="tabsChange"
		    >
			<TabPane>
				<uni-list>
					<uni-list-item >
						 <!-- 自定义 header -->
						 <view slot="header" class="slot-box">
							 <image class="slot-image" src="../../static/img/time.png" mode="widthFix"></image>
							2021-03-01 15:23
						 </view>
						 <!-- 自定义 body -->
						 <!-- <text slot="body" class="slot-box slot-text">自定义插槽</text> -->
						 <!-- 自定义 footer-->
						 <template slot="footer">
							 <view class="footer">
								 <text class="comming">正在进行</text>
								 <text class="coming-desc">ئاللىقاچان تاپشۇرغان</text>
							 </view>
						 </template>
					 </uni-list-item>
					<uni-list-item  title="联系人: " note="ئالاقىلاشقۇچى"
					 rightText="艾先生"></uni-list-item>
					<uni-list-item  title="联系方式: " note="ئالاقىلىشىش ئۇسۇلى"
					rightText="13833844332"
					>
					</uni-list-item>
					<uni-list-item  title="配送地址: " note="يەتكۈزۈپ بېرىش ئادرېسى"
					>
					<template slot="footer">
						 <view class="address">
							浙江省杭州市下城区兴业路金通数字科创园8号楼
							209室
						 </view>
					</template> 
					</uni-list-item>
					<uni-list-item  title="邮箱型号: " note="ماي تۇڭى تىپى"
					rightText="型号"
					></uni-list-item>
					<uni-list-item  title="数量: " note="ماي تۇڭى سانى"
					rightText="2L"
					></uni-list-item>
					<uni-list-item  title="单价: " note="يەككە باھا"
					rightText="￥20.00/L"
					></uni-list-item>
					<uni-list-item  title="总计：￥666.66" note='جەمئىي'
					>
					<template slot="footer">
						 <button class="cancel">
							<text class="cancel-order">取消订单</text>
							<text class="cancel-order-o"  >ئەمەلدىن قالدۇرماق</text>
						 </button>
					</template> 
					</uni-list-item>
				</uni-list>
			</TabPane>
			<TabPane>
				<uni-list>
					<uni-list-item >
						 <!-- 自定义 header -->
						 <view slot="header" class="slot-box">
							 <image class="slot-image" src="../../static/img/time.png" mode="widthFix"></image>
							2021-03-01 15:23
						 </view>
						 <!-- 自定义 body -->
						 <!-- <text slot="body" class="slot-box slot-text">自定义插槽</text> -->
						 <!-- 自定义 footer-->
						 <template slot="footer">
							 <view class="footer">
								 <text class="ok">正在进行</text>
								 <text class="ok-desc">ئاللىقاچان تاپشۇرغان</text>
							 </view>
						 </template>
					 </uni-list-item>
					<uni-list-item  title="联系人: " note="ئالاقىلاشقۇچى"
					 rightText="艾先生"></uni-list-item>
					<uni-list-item  title="联系方式: " note="ئالاقىلىشىش ئۇسۇلى"
					rightText="13833844332"
					>
					</uni-list-item>
					<uni-list-item  title="配送地址: " note="يەتكۈزۈپ بېرىش ئادرېسى"
					>
					<template slot="footer">
						 <view class="address">
							浙江省杭州市下城区兴业路金通数字科创园8号楼
							209室
						 </view>
					</template> 
					</uni-list-item>
					<uni-list-item  title="邮箱型号: " note="ماي تۇڭى تىپى"
					rightText="型号"
					></uni-list-item>
					<uni-list-item  title="数量: " note="ماي تۇڭى سانى"
					rightText="2L"
					></uni-list-item>
					<uni-list-item  title="单价: " note="يەككە باھا"
					rightText="￥20.00/L"
					></uni-list-item>
					<uni-list-item >
					<view slot="header"  class="slot-header">
						 <view class="ok">总计：￥666.66</view>
						 <view class="ok-desc">جەمئىي</view>
					</view>
					</uni-list-item>
				</uni-list>
			</TabPane>
			
		  </Tabs>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	import Tabs from '../../components/tabs/tabs.vue'
	import TabPane from '../../components/tabs/tabPane.vue'
	export default {
		components:{
			Tabs,
			TabPane
		 },
		data() {
			return {
				current: 0,
				TabList:[
					{title:'运行中', desc: 'بېرىلىۋاتىدۇ'},
					{title:'已经完成', desc: 'تاماملاندى'}
				],
			}
		},
		onLoad() {

		},
		methods: {
			tabsChange(index){
				this.current = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		.slot-image  {
			width: 26rpx;
			height: 26rpx;
			margin-right: 6rpx;
		}
		.slot-box {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 36rpx;
			color: #333333;
			display: flex;
			justify-content: center;
		}
		.footer {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.comming {
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #FFC03C;
				line-height: 34rpx;
			}
			.coming-desc {
				font-size: 20rpx;
				line-height: 22rpx;
				color: #FFC03C;
			}
			.ok {
				color: #000;
			}
			.ok-desc {
				font-size: 20rpx;
			}
			
		}
		.address {
			margin-top: 10rpx;
		}
		.cancel {
			display: flex;
			flex-direction: column;
			.cancel-order {
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #333333;
				line-height: 42rpx;
				margin-top: 8rpx;
			}
			.cancel-order-o {
				font-size: 24rpx;
				font-family: Adobe Arabic;
				color: #333333;
				line-height: 26rpx;
			}
		}
		.slot-header {
			display: flex;
			flex-direction: column;
			.ok-desc {
				font-size: 24rpx;
				font-family: Adobe Arabic;
				color: #333333;
			}
		}
		/deep/ .uni-list .uni-list-item:nth-of-type(5) {
			.uni-list-item__container {
				flex-direction: column;
			}
		}
		
		/deep/ .uni-list-item__content-title, /deep/ .uni-list-item__extra-text {
			font-size: 30rpx;
			font-family: PingFang SC;
			color: #333333;
		}
		
		/deep/ .uni-list .uni-list-item:nth-of-type(9) {
			.uni-list-item__content-title, .uni-list-item__content-note {
				font-weight: bold;
				color: #E73333;
			}
		}
	}
	
</style>

